<script lang="ts">
export const loadingPopup = useAntdModal({
  // eslint-disable-next-line import/no-self-import
  is: defineAsyncComponent(() => import('./Loading.vue')),
  type: 'modal',
}, {
  wrapClassName: 'global-loading',
  transitionName: 'none',
  centered: true,
  maskClosable: false,
  zIndex: 1900,
});
</script>

<script setup lang="ts">
defineOptions({ inheritAttrs: true });
</script>

<template>
  <div class="text-center">
    <i class="i-svg-spinners:ring-resize text-7 text-brand" />
  </div>
</template>

<style lang="scss">
.ant-modal-root:has(.global-loading) > .ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
</style>
